<template>
  <view class="card_record">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" shadow
      background-color="#007AFF" left-icon="left" status-bar title="我的DDC交易订单" />
    <view class="tabs flex-row-between-center">
      <!--      <view @click="index = 1" :class="['tab', index === 1 ? 'active-tab' : '']">
        <text>全部</text>
        <view :class="[index === 1 ? 'slider' : 'none']"></view>
      </view> -->
      <view @click="index = 2" :class="['tab', index === 2 ? 'active-tab' : '']">
        <text>买入</text>
        <view :class="[index === 2 ? 'slider' : 'none']"></view>
      </view>
      <view @click="index = 3" :class="['tab', index === 3 ? 'active-tab' : '']">
        <text>卖出</text>
        <view :class="[index === 3 ? 'slider' : 'none']"></view>
      </view>
      <view @click="index = 4" :class="['tab', index === 4 ? 'active-tab' : '']">
        <text>已完成</text>
        <view :class="[index === 4 ? 'slider' : 'none']"></view>
      </view>
      <view @click="index = 5" :class="['tab', index === 5 ? 'active-tab' : '']">
        <text>申诉</text>
        <view :class="[index === 5 ? 'slider' : 'none']"></view>
      </view>
    </view>
    <view class="tab-content" v-for="(item,index) in list" :key="index">
      <view class="cell flex-col-between">
        <view class="button_con" @click="openDetail(item)">
          {{item.order_status|fixType}}
        </view>
        <view class="button_con2" @click="shensuBtn(item)"
          v-if="type === 2 && item.order_status !=  -3 && item.order_status != 0">
          申诉
        </view>
        <view class="button_con2" @click="cancelComplain(item.order_id)" v-if="type === 4">
          取消
        </view>
        <view class="flex-row-between-center">
          <view>
            <text style="font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #E79D57;">买入</text>
            <text
              style="font-size: 30rpx;font-family: PingFang SC;font-weight: bold;color: #333333;margin-left: 15rpx;">{{item.order_amount}}</text>
            <text style="color: #999999;font-weight: 400;margin-left: 10rpx;">{{item.trading_currency_name}}</text>
          </view>
          <view>
            <text
              style="font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #333333;">{{item.order_pay}}</text>
            <text style="color: #999999;font-weight: 400;margin-left: 10rpx;">{{item.trading_currency_name}}</text>
          </view>
        </view>
        <view style="font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: #999999;">
          买家手机：{{item.buy_mobile}}
        </view>
        <view class="flex-row-between-center">
          <view class="flex-row-center">
            <text style="font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: #999999;">付款方式：</text>
            <image v-if="item.trading_payment.includes('1')" src="../../static/cardService/weixin.png" mode="aspectFit"
              style="width: 26rpx;height: 26rpx;">
            </image>
            <image v-if="item.trading_payment.includes('2')" src="../../static/cardService/alipay.png" mode="aspectFit"
              style="width: 26rpx;height: 26rpx;margin-left: 10rpx;"></image>
            <image v-if="item.trading_payment.includes('3')" src="../../static/cardService/bank.png" mode="aspectFit"
              style="width: 26rpx;height: 26rpx;margin-left: 10rpx;"></image>
          </view>
          <view>
            <text style="font-size: 24rpx;font-family: PingFang SC;font-weight: 400;color: #666666;">实付：</text>
            <text
              style="font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #E79D57;">{{item.order_amount}}</text>
            <text style="font-size: 24rpx;font-family: PingFang SC;font-weight: 400;color: #666666;">CNY</text>
          </view>
        </view>
        <view style="font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #999999;">
          状态：{{item.order_status|fixType}}</view>
        <view style="font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #999999;">编号：{{item.order_sn}}
        </view>
        <view class="u-flex" style="font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #999999;">买家付款期限：
          <u-count-down v-if="item.order_status == 0" :time="getNowDown(item)" format="HH:mm:ss" font-size="28">
          </u-count-down>
          <span v-else>{{item.order_status|fixType}}</span>
        </view>
      </view>
    </view>

    <!-- 弹框 start -->
    <view class="el_dialog" v-if="isDialog">
      <view class="el_dialog_box">
        <view class="dialog_header u-flex u-ju-between u-ali-center">
          <view class="">
            支付确认
          </view>
          <view class="countDown u-flex">
            丨
            <u-count-down :time="add_time" format="HH:mm:ss" font-size="28"></u-count-down>
          </view>
          <view class="close" @click="isDialog = false">
            ×
          </view>
        </view>
        <view class="dialog_form u-flex u-ali-center">
          <view class="_label">
            付款备注
          </view>
          <view class="_conatent">
            {{buy_payment_sn}}
          </view>
        </view>
        <view class="dialog_form u-flex u-ali-center">
          <view class="_label">
            支付方式
          </view>
          <view class="_conatent u-flex">
            <view :class="payIndex == index ?'pay_ment':'pay_ment_b'" @click="changePay(index)"
              v-for="(item,index) in pay_ment" :key="index">
              {{item}}
            </view>
          </view>
        </view>
        <view class="dialog_form u-flex u-ali-center">
          <view class="_label">
            收款码
          </view>
          <view class="_conatent">
            <image class="conatent_img" src="../../static/cardService/ring.png" mode=""></image>
          </view>
        </view>
        <view class="dialog_form u-flex u-ali-center">
          <view class="_label">
            收款账号
          </view>
          <view class="_conatent">
            cc231232132
          </view>
        </view>
        <view class="dialog_form u-flex u-ali-center">
          <view class="_label">
            姓名
          </view>
          <view class="_conatent">
            马一
          </view>
        </view>
        <view class="dialog_form u-flex u-ali-center">
          <view class="_label">
            联系手机
          </view>
          <view class="_conatent">
            13000000000
          </view>
        </view>
        <view class="dialog_form u-flex u-ali-center">
          <view class="red_text">
            提示：请在时间内给对方付款，并点击“确认 已付款”按钮，付款时请按填写上述“付款备注”内容的编号。
          </view>
        </view>
        <view class="button_dialog" @click="confimClick(id)">
          {{ $ui.getStorage('userInfo')['tel'] === detailInfo['contact_phone'] ? '收款' : '付款' }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getOrder,
    getOrderDetail,
    setOrderPayment,
    setOrderConfirm, // 订单确认付款
    getOrderComplain, //申诉订单
    setOrderComplain, //订单申诉
    cancelComplain //取消订单申诉
  } from '../../api/cardService/card.js'
  export default {
    data() {
      return {
        isDialog: false,
        index: 2,
        payIndex: 0,
        countdown1: 500000,
        pay_ment: ['微信支付', '支付宝', '银行卡'],
        list: [],
        detailInfo: {},
        type: '',
        buy_payment_sn: '',
        trading_payment_time: '',
        add_time: '',
        id: ''
      }
    },
    filters: {
      fixType(val) {
        return val == 0 ? '待付款' : val == 1 ? '已付款' : val == 2 ? '已完成' : val == -1 ? '已取消' : val == -2 ? '已超时' : val == -
          3 ? '仲裁中' : ''
      }
    },
    watch: {
      index(val) {
        this.type = val - 1
        this.getList(val - 1)
      }
    },
    onLoad() {
      this.getList(1)
      this.$ui.loading('加载中')
    },
    methods: {
      // 取消申诉
      cancelComplain(id) {
        cancelComplain({
          id
        }).then(res => this.$ui.toast(res.msg))
      },
      // 订单申诉
      // 我的ddc交易订单
      setOrderComplain(info) {
        setOrderComplain(info).then(res => {
          this.$ui.toast(res.msg)
          uni.hideLoading()
        })
      },
      /**
       * 点击申诉
       */
      shensuBtn(item) {
        console.log(item);
        console.log(item.sell_id, this.$ui.getStorage('userId'));
        let that = this
        let appealReason = null
        uni.showActionSheet({
          // itemList按钮的文字接受的是数组
          itemList: ["请选择您申诉的原因", "未收到款项", "款项数额错误", "其它"],
          success(e) {
            if (e.tapIndex == 0) {

              // 手机壁纸
            } else if (e.tapIndex == 1) {
              // 电脑壁纸
              appealReason = '未收到款项'
            } else if (e.tapIndex == 2) {
              appealReason = '款项数额错误'
            } else if (e.tapIndex == 3) {
              appealReason = '其它'
            }
            that.setOrderComplain({
              // buy_id: item.buy_id,
              // order_id: item.order_id,
              id: item.order_id,
              appeal_reason: appealReason
            })
          }
        })
      },
      /**
       * 确认已付款
       */
      confimClick(id) {
        if (this.$ui.getStorage('userInfo')['tel'] === this.detailInfo['contact_phone']) { // 卖家收款
          setOrderConfirm({
            id,
            payment_type: this.payIndex * 1 + 1
          }).then(res => {
            this.$ui.toast(res.msg)
            this.isDialog = false
          })
        } else { // 买家付款
          setOrderPayment({
            id: id,
            payment_type: this.payIndex * 1 + 1
          }).then(res => {
            this.$ui.toast(res.msg)
            this.isDialog = false
          })
        }
      },
      getNowDown(item) {
        let time = item.trading_payment_time + item.add_time
        let timestamp = Date.parse(new Date())
        return time * 1000 - timestamp
      },
      /**
       * 获取订单详情
       */
      openDetail(item) {
        console.log(item, 18923789127);
        getOrderDetail({
          id: item.order_id
        }).then(res => {
          console.log(res.data);
          this.detailInfo = res.data
          this.buy_payment_sn = res.data.buy_payment_sn
          let timestamp = Date.parse(new Date())
          let num = (res.data.trading_payment_time + res.data.add_time) * 1000
          this.add_time = num - timestamp
          this.id = res.data.order_id
        })
        this.isDialog = true;
      },
      changePay(index) {
        this.payIndex = index
      },
      // 我的ddc交易订单
      getList(type) {
        getOrder({
          code: 'pibc',
          way: 0,
          type: type,
          page: this.page,
        }).then(res => {
          if (res.code == 200) {
            this.list = res.data.list
            console.log(this.list);
            uni.hideLoading()
          }
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .el_dialog {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(124, 124, 124);
    width: 100%;
    height: 100vh;

    .el_dialog_box {
      position: absolute;
      top: 200rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      min-height: 600rpx;
      border-radius: 6rpx;
      padding: 30rpx;
      background-color: #fff;
      box-sizing: border-box;

      .dialog_header {
        .countDown {
          width: 440rpx;

          .u-count-down__text {
            color: red !important;

            span {
              color: red;
            }
          }
        }

        .close {
          font-size: 45rpx;
        }
      }

      .dialog_form {
        margin-top: 20rpx;

        ._label {
          width: 130rpx;
          color: #666666;
          font-size: 24rpx;
        }

        ._conatent {
          color: black;
          font-size: 24rpx;

          .pay_ment {
            margin-right: 15rpx;
            padding: 10rpx;
            color: #fff;
            background-color: rgb(51, 51, 51);
            border-radius: 8rpx;
          }

          .pay_ment_b {
            margin-right: 15rpx;
            padding: 10rpx;
            color: rgb(51, 51, 51);
            border: 1rpx solid rgb(166, 166, 166);
            border-radius: 8rpx;
          }

          .conatent_img {
            width: 100rpx;
            height: 100rpx;
          }
        }
      }

      .button_dialog {
        margin: 30rpx auto;
        width: 92%;
        height: 70rpx;
        font-size: 26rpx;
        text-align: center;
        color: #fff;
        line-height: 70rpx;
        background-color: rgb(50, 50, 50);
      }
    }
  }

  .button_con {
    position: absolute;
    right: 160rpx;
    bottom: 30rpx;
    padding: 5rpx 25rpx;
    font-size: 26rpx;
    text-align: center;
    color: #fff;
    line-height: 70rpx;
    background-color: rgb(50, 50, 50);
  }

  .button_con2 {
    position: absolute;
    right: 30rpx;
    bottom: 30rpx;
    padding: 5rpx 25rpx;
    font-size: 26rpx;
    text-align: center;
    color: #fff;
    line-height: 70rpx;
    background-color: rgb(50, 50, 50);
  }

  .card_record {
    .tabs {
      height: 98rpx;
      background-color: #fff;
      padding: 0 30rpx;
      box-sizing: border-box;

      .tab {
        height: 98rpx;
        line-height: 98rpx;
        text-align: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        position: relative;
      }

      .active-tab {
        color: #333333;
        font-size: 28rpx;
        font-weight: bold;
      }

      .slider {
        width: 74rpx;
        height: 2rpx;
        background: #D2B17C;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
      }

      .none {
        display: none;
      }
    }

    .tab-content {
      margin-top: 40rpx;

      .cell {
        position: relative;
        height: 390rpx;
        background-color: #fff;
        box-sizing: border-box;
        padding: 35rpx;
      }
    }
  }
</style>
